<template>
  <vm-form-designer ref="vFormDesigner" class="form-designer-app">
    <template #customToolButtons>
      <el-button link style="margin-left: 10px" icon="finished" @click="saveFormJson">保存</el-button>
    </template>
  </vm-form-designer>
</template>

<script lang="ts">
import {Options, Vue,} from 'vue-class-component';
// import VmFormDesigner from 'vform3-mobile-builds'

@Options({
  // components: {VmFormDesigner},
  props: {
    formData: {type: Object, default: {}},
    formJSON: {type: Object, default: {}},
  }
})
export default class FormDesignerComponent extends Vue {

  mounted() {
    console.log(this.$refs.vFormDesigner);
  }

  saveFormJson() {
    console.log((this.$refs.vFormDesigner as any).getFormJson());
  }
}
</script>
<style lang="scss">
.vform-widget-template {
  display: none;
}

.form-designer-app {
  & > header {
    display: none;
  }

  & > section {

    & > .side-panel {
      .el-tabs__header.is-top {
        padding: 0 8px;
        margin: 0 0 15px 0 !important;

        .el-tabs__nav.is-top {
          margin-left: 0;

          svg {
            display: none;
          }

        }
      }

      .el-tabs__content {
        padding: 0 12px 0 8px;

        button {
          margin-left: 0;
        }

        #pane-componentLib {
          & > .el-collapse.widget-collapse {
            border-top: solid 1px #ebeef5;

            ul {
              padding-left: 0;

              li {
                width: 114px;
              }
            }
          }
        }
      }
    }

    & > section {
      border-left: solid 1px #ebeef5 !important;
      border-right: solid 1px #ebeef5 !important;

      & > .el-header.toolbar-header {
        height: 43px !important;
        border-bottom: solid 1px #ebeef5 !important;

        .toolbar-container {
          display: flex;
          align-items: center;
          justify-content: space-between;

          & > *:nth-child(3) {
            display: none;
          }

          .left-toolbar {
            margin-top: 0;
          }

          .right-toolbar {
            .right-toolbar-con {
              & > button:nth-child(5) {
                display: none;
              }

              button {
                &:hover {
                  i {
                    color: #a0cfff;
                  }

                  span {
                    color: #a0cfff;
                  }
                }

                i {
                  color: #409eff;
                }

                span {
                  color: #409eff;
                  margin-left: 2px;
                }
              }
            }
          }
        }
      }
    }
  }

}
</style>
